<template>
  <div>
    <van-field
      v-model="valueText"
      is-link
      v-show="!props.hidden"
      :readonly="true"
      :label="props.formItem?.title"
      :placeholder="props.placeholder.join(',')"
      :required="required"
      :rules="rules"
      :input-align="FieldInputAlign.DEFAULT"
      @click="showPicker = true"
    />
    <time-range-picker
      v-model:visible="showPicker"
      v-model:times="times"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </div>
</template>
<script setup lang="ts">
  import { isEmpty, isBlanks } from '@/utils/is';
  import { computed, watch, ref } from 'vue';
  import { evalFormual } from '@/utils/evalFormual';
  import { FieldInputAlign } from '@/enums/formEnum';
  import { onLoad } from '@dcloudio/uni-app';
  import TimeRangePicker from './TimeRangePicker/index.vue';

  const emits = defineEmits(['update:value', 'labelShow']);

  const props = defineProps({
    value: {
      type: [Array, String],
      default: () => null,
    },
    required: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    //隐藏组件的公共属性
    formula: {
      type: Object,
      default: () => {
        return {
          showFormula: '', //回显用，因为包含表单字段的时候会出现表单名称
          calcFormula: '', //解析用，表单名称对应为formData.fieldxxxx
        };
      },
    },
    formItem: {
      type: Object,
      default: () => {},
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    rule: {
      type: Object,
      default: () => null,
    },
    placeholder: {
      type: Array,
      default: () => [],
    },
    enableScan: {
      type: Boolean,
      default: false,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
  });

  const times = ref<string[]>([]);

  // field显示的值
  const valueText = ref<string>();

  // 是否显示下拉选
  const showPicker = ref<boolean>(false);

  const getTime = () => {
    const now = new Date();
    const arr = [
      String(now.getHours() < 10 ? '0' + now.getHours() : now.getHours()) +
        ':' +
        String(now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()) +
        ':' +
        String(now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()),
      String(now.getHours() + 2 < 10 ? '0' + now.getHours() + 2 : now.getHours() + 2) +
        ':' +
        String(now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()) +
        ':' +
        String(now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()),
    ];
    return arr;
  };

  /** 计算属性：_value */
  const _value = computed({
    get() {
      return props.value;
    },
    set(val) {
      emits('update:value', val);
    },
  });

  /** 校验规则 */
  const rules = computed(() => {
    if (isEmpty(props.rule)) {
      return [];
    } else {
      return props.rule;
    }
  });

  onLoad(() => {
    if (isBlanks(_value.value)) {
      const arr = getTime();
      valueText.value = arr[0] + ' - ' + arr[1];
      times.value = getTime();
    } else {
      valueText.value = _value.value[0] + ' - ' + _value.value[1];
      times.value = [String(_value.value[0]), String(_value.value[1])];
    }
  });

  /**
   * 确认选择
   * @param _value 选中的值
   */
  const onConfirm = () => {
    valueText.value = times.value[0] + ' - ' + times.value[1];
    _value.value = times.value;
    showPicker.value = false;
  };

  /**
   * 取消
   */
  const onCancel = () => {
    valueText.value = '';
    times.value = getTime();
    showPicker.value = false;
  };

  const doFormula = () => {
    let hidden = evalFormual(props.formula.calcFormula, props.formData);
    //如果隐藏，同时也隐藏label,通知父组件去隐藏，因为label不在当前界面
    //调用父组件FormDesignRender 的方法：
    emits('labelShow', props.formItem, hidden);
  };

  watch(
    () => props.formData,
    (newVal, oldVal) => {
      doFormula();
    },
    { immediate: true, deep: true },
  );
</script>
